<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>历史记录</title>
		<meta name="viewport" content="width=device-width,initial-scale=1.0, 
		minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		 <meta http-equiv="Pragma" content="no-cache" />
		 <meta name="apple-mobile-web-app-status-bar-style" content="default" />  
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />  
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />  
	    <meta http-equiv="Cache-Control" content="no-cache,must-revalidate" />
	    <meta http-equiv="Expires" content="0" />
		<meta http-equiv="Access-Control-Allow-Origin" content="*">
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<link rel="stylesheet" href="js/dropload.css">
		<link rel="stylesheet" href="css/mui.min.css" />
		<style type="text/css">
			*{
		        margin: 0;
		        padding:0;
		        -webkit-tap-highlight-color:rgba(0,0,0,0);
		        -webkit-text-size-adjust:none;
		    }
		    a{
		    	text-decoration: none;
		    	color:#FFFFFFs
		    }
		    a img{
		    	 vertical-align:middle;
		    	 
		    }
			#historys_msg{
				width:100%;
			}
			#historys_msg table{
				width:100%;
			}
			#historys_msg table tr{
				width:100%;
				text-align: center;

			}
			#historys_msg table tr th{
				height:2rem;
				color:gray;
				font-size: 1rem;
			}
    .header{
    	position: fixed;
    	top: 0;
        height: 4rem;
        line-height: 4rem;
        width: 100%;
        text-align: center;
        border-bottom: 1px solid #ccc;
        background: -moz-linear-gradient(top, #f9b65c 0%, #fb9814 100%);
	    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9b65c), color-stop(100%,#fb9814));
	    background: -webkit-linear-gradient(top, #f9b65c 0%,#fb9814 100%);
	    background: -o-linear-gradient(top, #f9b65c 0%,#fb9814 100%);
	    background: -ms-linear-gradient(top, #f9b65c 0%,#fb9814 100%);
	    background: linear-gradient(to bottom, #f9b65c 0%,#fb9814 100%);
    }
   .header h1 .goback{
    	position: absolute;
    	top: 0;left: 5px;
    	background: transparents;
    	color:#FFFFFF
    }
    .header h1{
    	position: relative;
    	top: 0;
    	width:100%;
        text-align: center;
        font-size: 1.5rem;
        font-weight: normal;
        color:#FFFFFF
    }
    #historys_msg{
    	margin-top:2.5rem;
        background-color: #fff;
    }
    #historys_msg .item{
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align:center;
        -webkit-box-align:center;
        box-align:center;
        -webkit-align-items:center;
        align-items:center;
        padding:3.125%;
        border-bottom: 1px solid #ddd;
        color: #333;
        text-decoration: none;
    }
   #historys_msg .item img{
        display: block;
        width: 4rem;
        height: 4rem;
        border:1px solid #ddd;
    }
    #historys_msg .item h3{
        display: block;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        width: 100%;
        max-height: 4rem;
        overflow: hidden;
        line-height: 2rem;
        margin: 0 10px;
        font-size: 1.2rem;
    }
   #historys_msg .item .date{
        display: block;
        height: 2rem;
        line-height: 2rem;
        color: #999;
    }
    .opacity{
        -webkit-animation: opacity 0.3s linear;
        animation: opacity 0.3s linear;
    }
    @-webkit-keyframes opacity {
        0% {
            opacity:0;
        }
        100% {
            opacity:1;
        }
    }
    @keyframes opacity {
        0% {
            opacity:0;
        }
        100% {
            opacity:1;
        }
    }
    .footer{
        position: fixed;
        left: 0;
        bottom: 0;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        width: 100%;
        height: 4rem;
    }
    .footer a{
        position: relative;
        display: block;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        line-height: 4rem;
        text-align: center;
        color: #666;
        background-color: #eee;
        text-decoration: none;
    }
    .footer a:before{
        content: '';
        position: absolute;
        left: 0;
        top: 10px;
        width: 1px;
        height: 2rem;
        background-color: #ccc;
    }
    .footer a:first-child:before{
        display: none;
    }
    .tbody_spans{
       display: inline-block;
       width:1rem;
       height:1rem;
       line-height:1rem;
       border-radius: 50%;
       background: #FF4500;
       text-align: center;
       font-size: 0.8rem;
       margin:0.2rem 1px;color:#FFFFFF
    }
    .tbody_s{
       display: inline-block;
       width:2rem;
       height: 2rem;
       font-size: 1.2rem;
       line-height:2rem;
       border-radius: 50%;
       background: FF4500;
       margin:1rem 1px;
      color:#FFFFFF;
      text-align: center;
    }
    
    
/* 小于400 */	  
@media screen and (max-width:300px) {
	html,body {
	font-size:1rem;
}
}/* 大于960 小于1200 */	
 @media screen and (min-width:301px) and (max-width:350px) {
	html,body {
	font-size:1rem;
}
}/* 大于960 小于1200 */	
 @media screen and (min-width:351px) and (max-width:420px) {
	html,body {
	font-size:1.1rem;
}
}/* 大于960 小于1200 */	
 @media screen and (min-width:421px) and (max-width:490px) {
	html,body {
	font-size:1.2rem;
}
}/* 大于960 小于1200 */	
 @media screen and (min-width:491px) and (max-width:620px) {
	html,body {
	font-size:1.3rem;
}
}/* 大于960 小于1200 */	
 @media screen and (min-width:621px) and (max-width:720px) {
	html,body {
	font-size:1.4rem;
}
}/* 大于960 小于1200 */	
 @media screen and (min-width:721px) and (max-width:820px) {
	html,body {
	font-size:1.5rem;
}
}/* 大于960 小于1200 */	
 @media screen and (min-width:821px) and (max-width:920px) {
	html,body {
	font-size:1.6rem;
}
}/* 大于960 小于1200 */	
 @media screen and (min-width:921px) and (max-width:1020px) {
	html,body {
	font-size:1.8rem;
}
}/* 大于960 小于1200 */	
 @media screen and (min-width:1021px) and (max-width:1120px) {
	html,body {
	font-size:2rem;
}
}/* 大于960 小于1200 */	
 @media screen and (min-width:1121px) and (max-width:1220px) {
	html,body {
	font-size:2.2rem;
}
}/* 大于960 小于1200 */	
 @media screen and (min-width:1221px) and (max-width:1320px) {
	html,body {
	font-size:2.4rem;
}
}/* 大于960 小于1200 */	
 @media screen and (min-width:1321px) and (max-width:1420px) {
	html,body {
	font-size:2.6rem;
}
}/* 大于960 小于1200 */	
 @media screen and (min-width:1421px) and (max-width:1520px) {
	html,body {
	font-size:2.8rem;
}
}/* 大于960 小于1200 */	
 @media screen and (min-width:1521px) and (max-width:1620px) {
	html,body {
	font-size:3rem;
}
}

.mui-action-back{
	/*修改当前返回的颜色*/
	color:#FFFFFF
}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav" style="background: red;">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title" style="color: #FFFFFF;">历史开奖记录</h1>
		</header>
		<div id="historys_msg">
			<table border="1" cellspacing="1" cellpadding="1">
				<thead id="table_head">
				</thead>
				<tbody id="table_body">
					
				</tbody>
			</table>
		</div>
		<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
		<script src="../js/mui.min.js"></script>
		<script src="js/dropload.min.js"></script>
		<script type="text/javascript">
			 function plusReady(){
					// 设置系统状态栏背景为红色
					plus.navigator.setStatusBarBackground('red');
					plus.webview.currentWebview().setStyle({scrollIndicator:'none'});
				}
				if(window.plus){
					plusReady();
				}else{
					document.addEventListener('plusready', plusReady, true);
				}
			mui.init({
				tatusBarBackground: 'green'
			});
			$(function(){
				
				    // 页数
    var page = 0;
    // 每页展示10个
    var size = 20;
	var urls="https://www.jindi163.com:8443/JDLot/lot/type/pagelist";
    // dropload
    var thead='<tr style="background-color:#e6e3e3">'+
								'<th>开奖期号</th>'+
								'<th>开奖结果</th>'+
								'<th>开奖时间</th>'+
									'<tr>';
							$("#table_head").html(thead);
    $('#historys_msg').dropload({
        scrollArea : window,
        domUp : {
            domClass   : 'dropload-up',
            domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',
            domUpdate  : '<div class="dropload-update">↑释放更新</div>',
            domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>'//loading加载更多，手动画出来，加上动画效果
        },
        domDown : {
            domClass   : 'dropload-down',
            domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
            domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
            domNoData  : '<div class="dropload-noData">暂无数据</div>'
        },
        loadUpFn : function(me){
            $.ajax({
                type: 'post',
                url: urls,
                data:{ 
				  PageSize:size,
				  PageNum:0,
				  table_name:"pk10"
				    },
                dataType: 'json',
                 contentType:"application/json",
            async:true,
            cache:false,
                success: function(data){
                	console.log(data)
                    var result = '';
                    var datas=data.datas;
                    var masg0,masg1,masg2,masg3,masg4,masg5,masg6,masg7,masg8,masg9;
                    for(var i = 0; i < datas.length; i++){
                    var smg= datas[i].number;
                    	smg=smg.split(",");
                    	masg0=smg.slice(0,1),
                    	masg1=smg.slice(1,2),
                    	masg2=smg.slice(2,3),
                    	masg3=smg.slice(3,4),
                    	masg4=smg.slice(4,5),
                    	masg5=smg.slice(5,6),
                    	masg6=smg.slice(6,7),
                    	masg7=smg.slice(7,8),
                    	masg8=smg.slice(8,9),
                    	masg9=smg.slice(9);
                        
                         var times = datas[i].time_current,
		         		 		oHour=times.slice(8,10),
		         					oMin =	times.slice(10,12),
		         					oSen	=	times.slice(12,14);
            var    time_current=oHour+":"+oMin+":"+oSen ;  

                              	 result  +='<tr>'+
								   '<td>'+(datas[i].period).slice(3)+'</td>'+
								   '<td><span class="tbody_spans">'+
								   		+masg0+
								   '</span><span class="tbody_spans">'+
								   		+masg1+
								 	'</span><span class="tbody_spans">'+
								   		+masg2+
								   '</span><span class="tbody_spans">'+
								   		+masg3+
									'</span><span class="tbody_spans">'+
								   		+masg4+
								  	'</span><span class="tbody_spans">'+
								   		+masg5+
								   		'</span><span class="tbody_spans">'+
								   		+masg6+
								   		'</span><span class="tbody_spans">'+
								   		+masg7+
								   		'</span><span class="tbody_spans">'+
								   		+masg8+
								   		'</span><span class="tbody_spans">'+
								   		+masg9+
								   '</span></td>'+
								   '<td>'+time_current+'</td>'+
									'</tr>';
									}

                        $("#table_body").html(result);
                        
                        // 每次数据加载完，必须重置 
                        me.resetload();  
                        // 重置页数，重新获取loadDownFn的数据
                       page = 1;
                        me.noData(false);
                },
                error: function(xhr, type){
                    mui.alter('网络不佳或服务器出错!');
                    // 即使加载出错，也得重置
                    me.resetload();
                }
            });
        },
        loadDownFn : function(me){
        	//上拉加载请求下一页的数据
            page++;
            // 拼接HTML
            var result = '';
            $.ajax({
                type: 'post',
                url: urls,
				  data:{ 
				  PageSize:size,
				  PageNum:page,
				  table_name:"pk10"//table_name：表的名称，固定住：重庆时时彩
				   },
                dataType: 'json',
                contentType:"application/json",
	            async:true,
                success: function(data){
                    var smg = data.datas;
                    console.log(smg)
                    if(smg.length > 0){
                        for(var i=0; i<smg.length; i++){
                        	
                        	var smgss=smg[i].number;//开奖号码
										smgss=smgss.split(",");
		                        masg0=smgss.slice(0,1),
		                    	masg1=smgss.slice(1,2),
		                    	masg2=smgss.slice(2,3),
		                    	masg3=smgss.slice(3,4),
		                    	masg4=smgss.slice(4,5),
		                    	masg5=smgss.slice(5,6),
		                    	masg6=smgss.slice(6,7),
		                    	masg7=smgss.slice(7,8),
		                    	masg8=smgss.slice(8,9);
		                    	masg9=smgss.slice(9);
		        
		        var   times    = smg[i].time_current;//获取开奖时间
		        var 	oHour	=	times.slice(8,10),
		         		oMin 	=	times.slice(10,12),
		         		oSen		=	times.slice(12,14);
           		 var   time_current = oHour+":"+oMin+":"+oSen ;  

                   		result  +='<tr>'+
									   '<td>'+(smg[i].period).slice(3)+'</td>'+
									   '<td><span class="tbody_spans">'+
									   		+masg0+
									   '</span><span class="tbody_spans">'+
									   		+masg1+
									 	'</span><span class="tbody_spans">'+
									   		+masg2+
									   '</span><span class="tbody_spans">'+
									   		+masg3+
										'</span><span class="tbody_spans">'+
									   		+masg4+
									  	'</span><span class="tbody_spans">'+
									   		+masg5+
									   		'</span><span class="tbody_spans">'+
									   		+masg6+
									   		'</span><span class="tbody_spans">'+
									   		+masg7+
									   		'</span><span class="tbody_spans">'+
									   		+masg8+
									   		'</span><span class="tbody_spans">'+
									   		+masg9+
									   '</span></td>'+
									   '<td>'+time_current+'</td>'+
										'</tr>';
                        }
 
                    }else{
                             // 如果没有数据
                        me.noData();
                    }
   
                        // 插入数据到页面，放到最后面
                        $('#table_body').append(result);
                        // 每次数据插入，必须重置
                        me.resetload();
    
                },
                error: function(xhr,type){
                 alert('Ajax error!');
                    // 即使加载出错，也得重置
                    me.resetload();
                }
            });
        },
        threshold : 50
    });

			})
		</script>
	</body>
</html>
